<template>
    <div>
   <!-- 分类 -->
    <section class="category-list">
        <div v-for="(item,index) in fenleiList" :key="index">
            <img :src="item.imgUrl">
             <span>{{item.name}}</span>
        </div>
    </section>
    </div>
</template>

<script>

//导入轮播数据网络请求接口
import {homeCategory} from '../../../api'
    export default {
            data(){
                return{
                    fenleiList:[],

                }
            },
            created(){
                //初始化数据
                this.getHomecategory();
            },
            methods:{
                //获取分类数据
                getHomecategory(){
                    homeCategory((res)=>{
                        this.fenleiList = res.data
                        // console.log(this.fenleiList);
                    })
                }
            }
    }
</script>

<style lang="scss" scoped>
@import './css/gouwu.scss';

.category-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 26px;

    div {
        display: flex;
        flex-direction: column;
        width: 20%;
        text-align: center;

        img {
            width: 80px;
            height: 80px;
            margin: 26px auto 16px auto;
        }
    }
}
</style>